<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #efeff4;
				touch-action: none;
			}
			
			.mui-scroll-wrapper {
				touch-action: none;
			}
			
			.mui-slider {
				touch-action: none;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				padding-bottom: 51px;
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" id="headerbf">
			<h1 class="mui-title">移动病房</h1>
		</header>
		<div class="mui-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<!--这里放置真实显示的DOM内容-->
					<div style="height:44px;"></div>
					<div class="mui-slider">
					  <div class="mui-slider-group mui-slider-loop">
						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="pic4.jpg" /></a></div>
						<div class="mui-slider-item"><a href="#"><img src="images/pic1.jpg" /></a></div>
						<div class="mui-slider-item"><a href="#"><img src="images/pic2.jpg" /></a></div>
						<div class="mui-slider-item"><a href="#"><img src="images/pic3.jpg" /></a></div>
						<div class="mui-slider-item"><a href="#"><img src="images/pic4.jpg" /></a></div>
						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/pic1.jpg" /></a></div>
					  </div>
					</div>
					<p>
						&nbsp;&nbsp;&nbsp;&nbsp;健康小贴士
					</p>
					<div class="mui-card">
						<!--页眉，放置标题-->
						<div class="mui-card-header">常用的物理降温方法</div>
						<!--内容区-->
						<div class="mui-card-content">(1)头部冷敷：头部冷敷适合小儿的一般发热，体温并不特别高的孩子。方法是将毛巾用凉水浸湿后敷在患儿的前额部，每5～10分钟更换一次。也可将水袋中灌上凉水，枕在脑下。

(2)温水擦浴：温水擦浴适合于高热患儿的降温。方法是用32℃～34℃左右的温水擦拭患儿的全身皮肤。在腋窝、腹股沟等血管丰富的部位擦拭时间可稍长一些，以助散热。胸部、腹部等部位对冷刺激敏感，最好不要擦拭。出疹的孩子发热不要用温水擦浴降温。

(3)酒精擦浴：酒精擦浴适合于发热较高的患儿。方法是用30%～50%浓度的酒精，如无酒精亦可用白酒代替，用小毛巾浸湿后擦拭患儿颈部、四肢、后背、手足心等部位。尤其重点擦拭腋下、肘部、腹股沟等血管丰富的部位。注意对麻疹等出疹性疾病不宜采用酒精擦浴。

(4)冷盐水灌肠：冷盐水灌汤的降温效果显著，但不适合家庭中操作。方法是取生理盐水200～300mL，温度以4℃～6℃为宜，将肛管用甘油等润滑油擦拭后插入肛门，再将准备好的盐水用注射器注入或灌入，灌入后需用手将患儿肛门夹紧10分钟左右，以防盐水排出。</div>
						<!--页脚，放置补充信息或支持的操作-->
						<div class="mui-card-footer">小贴士</div>
					</div>
					<div class="mui-card">
						<!--页眉，放置标题-->
						<div class="mui-card-header">哪些食物吃了可以降血压</div>
						<!--内容区-->
						<div class="mui-card-content">简单来说，山楂，葛根，薏苡仁，决明子，百合，山药，白扁豆，莱菔子为我推荐的八种降血压食物，但是这八种食物只是有药物疗效的食物，并不可代替药物治疗，具体治疗药物需要在医生指导下购买。

要知道降血脂的方法，就要先知道高血脂的发病机制，所谓高血脂是指由于血脂代谢或转运异常使血浆一种或多种脂质过高, 血清总胆固醇、甘油三酯或低密度脂蛋白水平过高和 (或) 血清高密度脂蛋白胆固醇过低的病症。</div>
						<!--页脚，放置补充信息或支持的操作-->
						<div class="mui-card-footer">小贴士</div>
					</div>
					<div class="mui-card">
						<!--页眉，放置标题-->
						<div class="mui-card-header">心率过速（>100）紧急处理方法</div>
						<!--内容区-->
						<div class="mui-card-content">（1）嘱患者大声咳嗽。
（2）嘱患者深吸气后憋住气，然后用力作呼气动作。
（3）嘱患者用手指刺激咽喉部，引起恶心、呕吐。
（4）嘱患者闭眼向下看，用手指在眼眶下压迫眼球上部，先压右眼。同时搭脉搏数心率，一旦心动过速停止，立即停止压迫。但切勿用力过大，每次10分钟，压迫一侧无效再换对侧，切忌两侧同时压迫。青光眼、高度近视眼禁忌。
</div>
						<!--页脚，放置补充信息或支持的操作-->
						<div class="mui-card-footer">小贴士</div>
					</div>
					<div style="height:44px;"></div>
				</div>
			</div>
		</div>

		<script src="js/util.js"></script>
		<script type="text/javascript">
			
			var scrollContent = mui('.mui-scroll-wrapper');
			
			scrollContent.scroll({
				scrollY: true, //是否竖向滚动
				scrollX: false, //是否横向滚动
				bounce: false,//是否启用回弹
				startX: 0, //初始化时滚动至x
				startY: 0, //初始化时滚动至y
				indicators: false, //是否显示滚动条
				deceleration: 0.0006 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
			});
			
			var gallery = mui('.mui-slider');
			gallery.slider({
			  interval:5000,//自动轮播周期，若为0则不自动播放，默认为0；
			});
			
			(function() {
				mui.init({
				});
				
				mui.plusReady(function() {
					
					localStorage.setItem('remoteAddress', "http://ddns.starxy.cc:8083");
					localStorage.setItem('userIn', "0");
					
					var self = plus.webview.currentWebview(),
						leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中

					/**	
					 * drawNativeIcon 绘制带边框的半圆，
					 * 实现原理：
					 *   id为bg的tag 创建带边框的圆
					 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
					 * 	 id为iconBg的红色背景图
					 *   id为icon的字体图标
					 *   注意创建先后顺序，创建越晚的层级越高
					 */
					var drawNativeIcon = util.drawNative('icon', {
						bottom: '5px',
						left: leftPos + 'px',
						width: '60px',
						height: '60px'
					}, [{
						tag: 'rect',
						id: 'bg',
						position: {
							top: '1px',
							left: '0px',
							width: '100%',
							height: '100%'
						},
						rectStyles: {
							color: '#fff',
							radius: '50%',
							borderColor: '#ccc',
							borderWidth: '1px'
						}
					}, {
						tag: 'rect',
						id: 'bg2',
						position: {
							bottom: '-0.5px',
							left: '0px',
							width: '100%',
							height: '45px'
						},
						rectStyles: {
							color: '#fff'
						}
					}, {
						tag: 'rect',
						id: 'iconBg',
						position: {
							top: '5px',
							left: '5px',
							width: '50px',
							height: '50px'
						},
						rectStyles: {
							color: '#d74b28',
							radius: '50%'
						}
					}, {
						tag: 'font',
						id: 'icon',
						text: '\u6d4b', //此为字体图标Unicode码'\e600'转换为'\ue600'
						position: {
							top: '0px',
							left: '5px',
							width: '50px',
							height: '100%'
						},
						textStyles: {
							fontSrc: '_www/fonts/iconfont.ttf',
							align: 'center',
							color: '#fff',
							size: '30px'
						}
					}]);
					// append 到父webview中
					self.append(drawNativeIcon);

					//自定义监听图标点击事件
					var active_color = '#fff';
					drawNativeIcon.addEventListener('click', function(e) {
						if(localStorage.getItem('userIn')=="1"){
							//mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。', '悬浮球点击事件');
							var url = localStorage.getItem('remoteAddress') + '/api/startGenerateData';
							var userName = localStorage.getItem('userName');
							mui.get(url,{
								userName: userName,
								},function(data){
									mui.toast('正在查询');
								},'json'
							);
							var realtimePage = plus.webview.open('html/realtimePage.html', 'realtimePage', {}, 'slide-in-right', 200);
							// 重绘字体颜色
							if(active_color == '#fff') {
								drawNativeIcon.drawText('\u6d4b', {}, {
									fontSrc: '_www/fonts/iconfont.ttf',
									align: 'center',
									color: '#fff',
									size: '30px'
								}, 'icon');
								active_color = '#000';
							} else {
								drawNativeIcon.drawText('\u6d4b', {}, {
									fontSrc: '_www/fonts/iconfont.ttf',
									align: 'center',
									color: '#fff',
									size: '30px'
								}, 'icon');
								active_color = '#fff';
							}
						}else{
							alert("请先登录");
							var loginPage = plus.webview.open('html/loginPage.html', 'loginPage', {}, 'slide-in-right', 200);
						}

					});
					// 中间凸起图标绘制及监听点击完毕

					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);
					
					var nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;
								
					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.25)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
							currIndex = 1;
						} else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
							currIndex = 2;
						} else {
							currIndex = 3;
						}
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}

						if(targetPage == activePage) {
							return;
						}

						if(localStorage.getItem('userIn') == "1"){
							if(currIndex !== 3) { 
								//底部选项卡切换
								util.toggleNview(currIndex);
								// 子页面切换
								util.changeSubpage(targetPage, activePage, aniShow);
								//更新当前活跃的页面
								activePage = targetPage;
							} else {
								//第四个tab 打开新窗口
								var importDataPage = plus.webview.open('html/importDataPage.html', 'importDataPage', {}, 'slide-in-right', 200);
							}
						}else{
							if(currIndex == 0) { 
								//底部选项卡切换
								util.toggleNview(currIndex);
								// 子页面切换
								util.changeSubpage(targetPage, activePage, aniShow);
								//更新当前活跃的页面
								activePage = targetPage;
							}else{
								alert("请先登录");
								var loginPage = plus.webview.open('html/loginPage.html', 'loginPage', {}, 'slide-in-right', 200);
								return;
							}
						}
						
					});
					alert("请先登录");
					var loginPage = plus.webview.open('html/loginPage.html', 'loginPage', {}, 'slide-in-right', 200);
				});
			})();
			
		</script>
	</body>

</html>